<template>
  <div class="profile-container">
    <el-card class="profile-box">
      <h2 class="title" style="text-align: left;">个人资料</h2>
      <el-form label-width="100px">
        <!-- <h5>
          <span style="text-align: left;">头像:<el-avatar :src="form.avatar || defaultAvatar" size="large" /></span>
        </h5> -->
       
        <h5 style="text-align: left;" label="用户ID">
          用户ID:<el-input v-model="userId" disabled />
        </h5>
        <h5>
          用户名:<el-input v-model="form.username" disabled />
        </h5>
    
        
        <el-form-item>
          <el-button type="danger" @click="logout">退出</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { API_BASE_URL } from '@/config';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { defaultAvatar } from '@/assets/defaultAvatar';

const router = useRouter();
const form = ref({
  username: '',
  avatar: ''
});
const userId = ref(localStorage.getItem('userId'));

const getProfile = async () => {
  try {
    const userId = localStorage.getItem('userId');
    const response = await axios.get(`${API_BASE_URL}/users/${userId}`);
    form.value = response.data;
  } catch (error: any) {
    ElMessage.error(error.response?.data?.message || '获取个人资料失败');
  }
};

const onSubmit = async () => {
  try {
    const userId = localStorage.getItem('userId');
    await axios.put(`${API_BASE_URL}/users/${userId}`, form.value);
    ElMessage.success('保存成功');
  } catch (error: any) {
    ElMessage.error(error.response?.data?.message || '保存失败');
  }
};

const logout = async () => {
  try {
    const userId = localStorage.getItem('userId');
    await axios.post(`${API_BASE_URL}/auth/logout`, { userId });
    localStorage.removeItem('token');
    localStorage.removeItem('userId');
    router.push('/login');
  } catch (error: any) {
    ElMessage.error(error.response?.data?.message || '退出失败');
  }
};

onMounted(() => {
  getProfile();
});
</script>

<style scoped>
.profile-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 20px;
}

.profile-box {
  width: 100%;
  max-width: 500px;
  padding: 20px;
}

.title {
  text-align: center;
  margin-bottom: 20px;
  font-size: 1.5em;
  color: #303133;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-avatar {
  display: block;
}

@media (max-width: 768px) {
  .profile-box {
    padding: 15px;
  }

  .el-form-item__label {
    width: 100% !important;
    text-align: left;
  }

  .el-form-item__content {
    margin-left: 0 !important;
  }
}
</style> 